<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="top_t">
		</view>
		<Header title="发布出售"></Header>
		<!-- 下方的列表 -->
		<view class="body_bot">
			<view class="hezi">
				<!-- 上面的名称 -->
				<view class="name_tit">
					<view class="lef">
						请选择出售的商品
					</view>
					<view class="rig">
						可卖数量：<text>{{shul}}</text>
					</view>
				</view>
				<!-- 下面的商品 -->
				<view class="shooping">
					<view v-for="(item,index) in list" :key="index" @click="xuanze(item,index)" class="shoopList">
						<view class="tupian">
							<image src="http://img.cpgm.cc/panda/static/game/vib.png" class="bg" mode="widthFix">
							</image>
							<image
								:src="item.img?imgurl+item.img:`http://img.cpgm.cc/panda/static/daoju/${index+1}.png`"
								class="wupin" mode="widthFix"></image>
							<image src="http://img.cpgm.cc/panda/static/game/goux.png" v-show="index+1==ind"
								class="xuanzhong" mode="widthFix"></image>
							<view class="num">
								x{{Number(item.num).toFixed(0)}}
							</view>
						</view>

						<!-- 文字 -->
						<view class="wenzi">
							{{item.name}}
						</view>
					</view>
				</view>
				<view v-if="list.length==0" class="zanwu">
					暂无商品
				</view>
				<!-- /下方的input出售价格 -->
				<view class="top_inp">
					<view class="wen">
						出售单价（水晶/个）
					</view>
					<input type="text" class="inp1"   @input="input1" v-model="pay" placeholder="出售单价" name="" id="">
				</view>
				<view class="bot_inp">
					<view class="wen">
						出售数量
					</view>
					<input type="number" class="inp1" v-model="num" @input="input" placeholder="出售数量" name="" id="">
				</view>
				<!-- 下方提示 -->
				<view class="tishi">
					1、每个用户最多只能发布10笔出售订单；<br>
					2、发布后不可取消，48小时未成交则退回道具；<br>
					3、自由之刃等级越高，交易手续费越低；
				</view>
				<!-- 发布出售 -->
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="qiuList"
					class="fabu_btn button">
					发布出售
				</u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				id: 0,
				shul: 0,
				ind: 0,
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				list: ['', '', '', '', '', ''],
				pay: '',
				num: ''
			}
		},
		onShow() {
			this.initList()
		},

		methods: {
			input(e) {
				this.$nextTick(() => {
					this.num = parseInt(this.num)
				});
			},
			input1(e){
				this.$nextTick(() => {
					this.pay = this.pay.replace(/[^\d.]/g,'').replace(/(\.\d+)\.+/g, '$1').replace(/(\..*)\./g, '$1')
				});
			},
			// 点击选择
			xuanze(item, index) {
				if (item.num <= 0) return this.$msg('暂无道具')
				this.shul = Number(item.num).toFixed(0)
				this.ind = index + 1
				this.id = item.id
			},
			// 请求出售
			async qiuList() {
				if (!this.pay || !this.num) {
					return this.$msg('请填写单价和数量')
				}
				let n = await this.$http.index.toSell({
					id: this.id,
					price: this.pay,
					num: this.num
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					this.pay = ''
					this.num = ''
					this.initList()
					// this.userinfos()
				}
			},
			async initList() {
				let n = await this.$http.index.exchangeList({
					type: 1
				})
				this.list = n.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.tishi {
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #343434;
		margin-top: 30px;
		line-height: 2.0;
	}

	.fabu_btn {
		// position: absolute;
		z-index: 10;
		// bottom: 20px;
		margin-top: 20px;
		margin-left: 50%;
		transform: translateX(-50%);
		width: 80%;
		font-size: 16px;
		font-family: SourceHanSansCN-Bold, SourceHanSansCN;
		font-weight: bold;
		color: #000000;
		height: 51px;
		line-height: 50px;
		text-align: center;
		background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
		border-radius: 8px;
	}

	.top_inp {
		width: 100%;
		height: 52px;
		background: #F6EAE0;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		.wen {
			padding-left: 10px;
			font-size: 13px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 600;
			color: #131314;
		}

		.inp1 {
			text-align: right;
			padding: 0 10px;

		}
	}

	.bot_inp {
		width: 100%;
		height: 52px;
		background: #F6EAE0;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		.wen {
			padding-left: 10px;
			font-size: 13px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 600;
			color: #131314;
		}

		.inp1 {
			text-align: right;
			padding: 0 10px;
		}
	}

	.zanwu {
		text-align: center;
		font-size: 18px;
		font-weight: 600;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.mian {
		height: 100vh;
	}

	.body_bot {
		height: calc(100vh - 100px);
		padding: 10px;
		position: relative;


		.hezi {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			border-radius: 11px;
			border: 1px solid #FEE1C3;
			overflow-y: auto;
			padding: 10px 10px;
			position: relative;
			padding-bottom: 80px;

			.shooping {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20px;

				.shoopList {

					width: 20%;
					height: 70px;
					margin-bottom: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;

					.wenzi {
						text-align: center;
						font-size: 9px;
						zoom: 0.85;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #343434;
					}

					.tupian {
						position: relative;
						width: 57px;
						height: 57px;

						.num {
							position: absolute;
							right: 5%;
							bottom: 5%;
							font-size: 8px;
							font-family: SourceHanSansCN-Bold, SourceHanSansCN;
							color: #3FFF95;
							// font-weight: bold;
							line-height: 13px;
						}


						.xuanzhong {
							position: absolute !important;
							top: 0%;
							left: 0;
							width: 100%;
							height: 100%;
						}

						.bg {
							width: 57px;
						}

						.wupin {
							width: 38px;
							height: 38px;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 1;
						}
					}
				}
			}

			.name_tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 15px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #343434;
				margin-bottom: 10px;

				text {
					color: #239D4C;
				}
			}
		}
	}

	.top_t {
		position: fixed;
		top: 0;
		height: 750rpx;
		max-width: 480px;
		width: 100%;
		z-index: -1;
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	}
</style>